<template>
  <div class="FromGood">
    <el-form :model="goodFrom" :rules="ruleGood" status-icon ref="goodFrom"
             label-width="120px" class="demo-ruleForm">
      <el-form-item label="商品名称" prop="mName">
        <el-input v-model="goodFrom.mName" placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item label="商品描述" prop="mDescription">
        <el-input v-model="goodFrom.mDescription" placeholder="请输入商品描述"></el-input>
      </el-form-item>
      <el-form-item label="商品总量" prop="mInstock">
        <el-input v-model.number="goodFrom.mInstock" placeholder="请输入商品总量"></el-input>
      </el-form-item>
      <el-form-item label="商品状态" prop="mStatus">
        <el-select v-model="goodFrom.mStatus" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品原价" prop="mOriginal">
        <el-input v-model.number="goodFrom.mOriginal" placeholder="请输入商品原价"></el-input>
      </el-form-item>
      <el-form-item label="商品促销价" prop="mPromotion">
        <el-input v-model.number="goodFrom.mPromotion" placeholder="请输入商品促销价"></el-input>
      </el-form-item>
      <el-form-item label="商品分类" prop="cId">
        <el-select v-model="goodFrom.cId" placeholder="请选择商品分类">
          <el-option label="花卉" value="0"></el-option>
          <el-option label="水果" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品主图" prop="mImg">
        <el-upload
            :action="url"
            list-type="picture-card"
            ref="uploadfiles"
            :on-success="Mupload"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('goodFrom')">立即添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: window.g.baseURL + "/file/upload",
      goodFrom: {
        mName: '',
        mDescription: '',
        mInstock: '',
        mStatus: '',
        moriginal: '',
        mOriginal: '',
        cId: '',
        mPromotion: '',
        mImg: ''
        /*pick: 8*/
      },
      ruleGood: { //校验规则
        mName: [
          {required: true, message: '请输入商品名称', trigger: 'blur'},
          {min: 1, message: '最少一个字符', trigger: 'blur'}
        ],
        mDescription: [
          {required: true, message: '请输入商品描述', trigger: 'blur'},
          {min: 50, message: '最少五十个字符', trigger: 'blur'}
        ],
        mInstock: [
          {required: true, message: '请输入商品总量'}, {type: 'number', message: '请输入数字', trigger: 'blur'}
        ],
        mStatus: [
          {required: true, message: '请选择商品状态', trigger: 'change'}
        ],
        mOriginal: [
          {required: true, message: '请输入商品价格', trigger: 'blur'},
          {type: 'number', message: '请输入数字', trigger: 'blur'}
        ],
        mPromotion: [
          {required: true, message: '请输入商品价格', trigger: 'blur'},
          {type: 'number', message: '请输入数字', trigger: 'blur'}
        ],
        cId: [
          {required: true, message: '请选择商品类别', trigger: 'change'}
        ]
      },
      dialogImageUrl: '',
      dialogVisible: false,
      options: [{
        value: '-1',
        label: '已下架'
      }, {
        value: '2',
        label: '在售'
      }, {
        value: '1',
        label: '待上架'
      }],
      value: ''

    }
  },
  methods: {
    failure(msg) {
      this.$notify.error({
        title: '错误',
        message: msg
      });
    },
    resetForm(goodFrom) {
      this.$refs[goodFrom].resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$http({
            method: 'post',
            url: 'rjbCommodity/insert',
            responseType: 'post',
            data: JSON.stringify(this.goodFrom)
          })
              .then(data => {
                // console.log(data.data.extend.data);
                if (data.data.extend.data.mImg != null) {
                  this.$notify({
                    title: '成功',
                    message: '添加成功',
                    type: 'success'
                  });
                  this.$refs.uploadfiles.clearFiles();
                  this.resetForm(formName);

                  return true;
                } else {
                  this.failure("添加失败");
                  return false;
                }
              })
              .catch(error => {
                console.log(error);
              });
        } else {
          this.failure("请输入信息");
        }

      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log(file);
    },
    Mupload(file) {
      this.goodFrom.mImg = file;
    }
  }
}
</script>

<style scoped>
.FromGood {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
</style>
